<template>
  <div class="bg-white min-h-full px-4 py-16 sm:px-6 sm:py-32 md:grid md:place-items-center lg:px-8">
    <div class="max-w-max mx-auto">
      <main class="sm:flex">
        <p class="text-4xl font-extrabold text-indigo-600 sm:text-5xl break-words">{{error.statusCode}}</p>
        <div class="sm:ml-6">
          <div class="sm:border-l sm:border-gray-1600 sm:pl-6">
            <h1 class="text-4xl font-extrabold text-gray-900 tracking-tight sm:text-5xl break-words">{{error.statusCode === 404 ? $t('pageNotFound') : error.message}}</h1>
            <p class="mt-5 text-base text-gray-1000 break-words">{{$t('pleaseCheckURL')}}</p>
          </div>
          <div class="mt-10 flex space-x-3 sm:border-l sm:border-transparent sm:pl-6">
            <common-link path="/"
              class="inline-flex items-center justify-center h-38 px-4 text-base text-blue-1300 border border-blue-1300 duration-100 hover:bg-blue-1700 focus:bg-blue-1700 px-2 radius-19 go-back-home">
              {{$t('goBackHome')}}
            </common-link>
          </div>
        </div>
      </main>
    </div>
  </div>
</template>

<script>
export default {
  props: ['error'],
  layout: 'blog', // 你可以为错误页面指定自定义的布局
}
</script>